<template>
  <div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in swipe" :key="item.id"
        ><van-image :src="'http://liufusong.top:8080' + item.imgSrc"
      /></van-swipe-item>
    </van-swipe>
    <!--  -->
    <van-grid>
      <van-grid-item text="整租">
        <template #icon>
          <span class="iconfont">&#xe6d3;</span>
        </template>
      </van-grid-item>
      <van-grid-item text="合租">
        <template #icon>
          <span class="iconfont">&#xe68d;</span>
        </template>
      </van-grid-item>
      <van-grid-item text="地图找房">
        <template #icon>
          <span class="iconfont">&#xe62a;</span>
        </template>
      </van-grid-item>
      <van-grid-item text="去出租">
        <template #icon>
          <span class="iconfont">&#xe7ff;</span>
        </template>
      </van-grid-item>
    </van-grid>
    <!--  -->
    <van-search
      v-model="value"
      show-action
      icon="location-o"
      placeholder="请输入小区或地址"
    >
      <template #label>
        <div @click="fn">
          {{ list }}
          <span class="iconfont icon-xiajiantou" style="font-size: 12px"></span>
        </div>
      </template>
      <template #action>
        <div><van-icon name="location-o" color="#fff" size="28" /></div>
      </template>
    </van-search>

    <!--  -->
    <van-cell
      title="租房小组"
      value="更多"
      title-class="left-cell"
      value-class="right-cell"
    />
    <!--  -->
    <van-grid :column-num="2" direction="horizontal" :gutter="10">
      <van-grid-item v-for="item in groups" :key="item.id">
        <template #icon>
          <van-image
            width="50"
            height="50"
            :src="'http://liufusong.top:8080' + item.imgSrc"
          />
        </template>
        <template #text>
          &nbsp; {{ item.title }} <br />
          &nbsp; {{ item.desc }}
        </template></van-grid-item
      >
    </van-grid>
  </div>
</template>

<script>
import { getSwiper, groups } from '@/api/home'
export default {
  name: 'home-page',
  components: {},
  props: {},
  data() {
    return {
      swipe: [],
      groups: [],
      value: '',
      area: {
        area: 'AREA|88cff55c-aaa4-e2e0'
      }
    }
  },
  computed: {
    list() {
      const name = window.localStorage.getItem('default-city') || '北京'
      return name
    }
  },
  watch: {},
  async created() {
    // 获取轮播图片
    const res = await getSwiper()
    // console.log(res)
    this.swipe = res.body
    // 获取区域图片
    const res1 = await groups(this.area)
    this.groups = res1.body
    // console.log(this.groups)
  },

  methods: {
    fn() {
      this.$router.push('/citylist')
    }
  }
}
</script>

<style scoped lang="less">
.my-swipe .van-swipe-item {
  color: #fff;
  // font-size: 20px;
  // line-height: 150px;
  height: 212px;
  text-align: center;
  // background-color: #39a9ed;
  img {
    height: 100%;
  }
}
.van-cell {
  background-color: #f6f5f6;
}
.van-search {
  width: 375px;
  position: fixed;
  top: 25px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0);
}
.left-cell {
  color: #666;
  font-size: 16px;
  font-weight: 700;
}
.right-cell {
  color: #666;
  font-size: 16px;
}
.van-grid.van-hairline--top {
  padding-bottom: 0px !important;
  span {
    display: inline-block;
    border-radius: 50%;
    background-color: #f2fbf7;
    font-size: 40px;
    font-weight: 500;
    padding: 10px;
    margin-bottom: 10px;
    color: #00ae66;
  }
}
.van-grid {
  padding-bottom: 10px;
  background-color: #f6f5f6;
}
</style>
